<template>
  <el-container>
    <el-header class="header">  
      <!-- <div class="bg_header">
          <div class="header_nav fl t_title"> -->
            <div class="blackpink">电影大数据分析系统</div>
          <!-- </div> 
      </div> 	 -->
    </el-header>
    <el-main class="data_content">
      <div class="data_main">
        <div class="main_left fl">
            <div class="left_1 t_btn6" style="cursor: pointer;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title" @click="$router.push('/FilmList')" style="cursor:pointer;">
                  <img src="../assets/img/rank.png" alt="">
                  电影票房排行榜
                </div>
                <!-- <div class="chart_1"><ItemRanking/></div> -->
                <div class="chart_1"><RankingTable2/></div>
            </div>
        </div>
        <div class="main_center fl">
            <div class="center_text">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                 <!--右下边框-->
                 <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title">
                    <img src="../assets/img/china.png" alt="">
                    中国地图
                </div>
                <div class="mapchart"><MapPage/></div>
            </div>
        </div>
        <div class="main_right fr">
            <div class="right_1">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title">
                    <img src="../assets/img/scoreRank.png" alt="">
                    电影评分排行榜
                </div>
                <div class="chart_2"><RankingTable/></div>
            </div>
        </div>
    </div>
    <div class="data_bottom">
        <div class="bottom_1 fl t_btn5">
            <!--左上边框-->
            <div class="t_line_box">
                <i class="t_l_line"></i> 
                <i class="l_t_line"></i> 
            </div> 
            <!--右上边框-->
            <div class="t_line_box">
                <i class="t_r_line"></i> 
                <i class="r_t_line"></i> 
            </div> 
            <!--左下边框-->
            <div class="t_line_box">
                <i class="l_b_line"></i> 
                <i class="b_l_line"></i> 
            </div> 
                <!--右下边框-->
                <div class="t_line_box">
                <i class="r_b_line"></i> 
                <i class="b_r_line"></i> 
            </div>
            <div class="main_title">
                <img src="../assets/img/cloud.png" alt="">
                电影词云
            </div>
            <div class="chart_3"><ItemYun/></div>
        </div>
        <div class="bottom_center fl">
            <div class="bottom_2 fl">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div>
                <div class="main_title">
                    <img src="../assets/img/recommand.png" alt="">
                    推荐显示
                </div>
                <div class="chart_4">
                    <ItemCarousel/>
                </div>
            </div>
        </div>
        <div class="bottom_4 fr">
            <!--左上边框-->
            <div class="t_line_box">
                <i class="t_l_line"></i> 
                <i class="l_t_line"></i> 
            </div> 
            <!--右上边框-->
            <div class="t_line_box">
                <i class="t_r_line"></i> 
                <i class="r_t_line"></i> 
            </div> 
            <!--左下边框-->
            <div class="t_line_box">
                <i class="l_b_line"></i> 
                <i class="b_l_line"></i> 
            </div> 
                <!--右下边框-->
                <div class="t_line_box">
                <i class="r_b_line"></i> 
                <i class="b_r_line"></i> 
            </div>
            <div class="main_title">
                <img src="../assets/img/line.png" alt="">
               票房折线图
            </div>
            <div class="chart_5">
                <ItemLineChart/>
            </div>
        </div>
    </div>
    </el-main>
  </el-container>
    
</template>
<script>
  import ItemYun from "@/components/ItemYun.vue"
  import ItemCarousel from "@/components/ItemCarousel.vue"
  import ItemLineChart from "@/components/ItemLineChart.vue"
  import MapPage from "@/components/MapPage.vue"
  import RankingTable from "@/components/RankingTable.vue"
  import RankingTable2 from "@/components/RankingTable2.vue"
  export default {
    name:'Home',
    components: {
        ItemYun,
        MapPage,
        ItemCarousel,
        ItemLineChart,
        RankingTable,
        RankingTable2,
    },
    props:{},
    data () {
      return {
        nowTime:'',
      };
    },
    methods: {
        timeFormate (timeStamp) {
              let year = new Date(timeStamp).getFullYear()
              let month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
              let date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
              let hh = new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours()
              let mm = new Date(timeStamp).getMinutes() < 10 ? '0' + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes()
              let ss = new Date(timeStamp).getSeconds() < 10 ? '0' + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds()
              let week = new Date(timeStamp).getDay()
              let weeks = ['日', '一', '二', '三', '四', '五', '六']
              let getWeek = '星期' + weeks[week]
              this.nowTime = year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm + ':' + ss + getWeek
          }, // 实时刷新当前时间，格式化
          nowTimes () {
              this.timeFormate(new Date())
              setInterval(this.nowTimes, 1000)
              this.clear()
          },
          clear () {
              clearInterval(this.nowTimes)
              this.nowTimes = null
          },
      },
      mounted () {
          this.nowTimes()
          localStorage.setItem('pageNow', JSON.stringify(1))
      },
      beforeUnmount () {
          this.clear()
      }
  }
</script>

<style scoped></style>
